<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 100px;
            height: 100px;
            background-color: skyblue;

            position: absolute;
            left: 200px;
            top: 130px;
        }
    </style>
</head>

<body>

    <div></div>

    <script>
        // 定时器结束以后我做一点其它事情  
        // 比如我准备一个方法   
        // 全部定时器结束以后再执行这个方法 

        function move(ele, obj,fn=()=>{console.log('这是默认的函数')}) {
            let count = 0; //总的计数器  放到循环外边 
            var data = 0; // 用来存所有定时器结束以后 函数执行后的返回值
            for (let k in obj) {
                count++;
                const mystyle = k; // let变量值可以修改 
                let target = obj[k]; // const 常量  里边的值不可以修改 
                if (mystyle === 'opacity') {
                    target *= 100;
                }
                const num = setInterval(function () {
                    // 放到定时器里边 就可以拿到它新的位置  
                    let init;
                    if (mystyle === 'opacity') {
                        init = window.getComputedStyle(ele)[mystyle] * 100
                    }
                    else {
                        init = parseInt(window.getComputedStyle(ele)[mystyle])
                    }
                    // 记录新的运动距离
                    let duration = (target - init) / 10;
                    duration = duration > 0 ? Math.ceil(duration) : Math.floor(duration)
                    // console.log(duration);
                    if (init === target) {
                       
                        clearInterval(num);
                        
                        count--;
                        if(count==0){
                            // 这里是所有的定时器结束了  
                            // 需要调用准备的方法   
                            // 形参fn 里边就是那个方法 
                            data = fn(10,20); //调用要加小括号  传值的不要加 
                        }
                       
                        
                    } else {
                        if (mystyle === 'opacity') {
                            ele.style[mystyle] = (init + duration) / 100;
                        }
                        else {
                            ele.style[mystyle] = init + duration + 'px';
                        }

                    }
                }, 30);
            }
        }


        var divele = document.querySelector('div');
        divele.onclick = function () {
            move(this, { 'left': 500,width:666,'opacity': 0.3 },test1);

        }

        function test1(num1,num2){
            // console.log(num1+num2);
            return num1+num2;
        }
    </script>

</body>

</html>